<template>
	<div class="container">
		<div style="position: fixed; top: 15px; right: 350px; z-index: 9999;">
			<el-button type="primary" icon="el-icon-plus" @click="addMaincategory">
				新增大类
			</el-button>
		</div>
		<div class="file-tree" v-for="(item, index) in categoryList" :key="index">
			<div class="folder-root">
				<div style="display: flex; vertical-align: middle; cursor: pointer;" @click="openPanel(index)">
					<el-image v-if="openpanel && panelindex == index" :src="require('../../assets/file1.jpg')"
						class="images"></el-image>
					<el-image v-else :src="require('../../assets/file2.jpg')" class="images"></el-image>
					{{ item.name }}
				</div>
				<div class="file-operation">
					<el-button type="text" icon="el-icon-plus" @click="addChildren(item)">
						新增子类
					</el-button>
					<el-button type="text" icon="el-icon-edit" @click="editCategory(item)">
						修改
					</el-button>
					<el-popconfirm title="确定删除当前分类？" @confirm="delCategory(item)" style="margin-left: 10px;">
						<el-button slot="reference" type="text" icon="el-icon-delete">
							删除
						</el-button>
					</el-popconfirm>
				</div>
				<!-- 新增分类弹窗 -->
				<el-dialog title="新增商品分类" :visible.sync="addModal" width="30%" :close-on-click-modal="false">
					<el-form ref="addForm" :model="addData" label-width="80px">
						<el-form-item prop="name" label="分类名称" :rules="[{ required: true, message: '请输入分类名称', trigger: 'blur' },]">
							<el-input v-model="addData.name" maxlength="5" placeholder="必填,长度不能超过5位." show-word-limit onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;">
							</el-input>
						</el-form-item>
						<el-form-item prop="req" label="排序号">
							<el-input v-model="addData.seq" onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;"></el-input>
						</el-form-item>
					</el-form>
					<span slot="footer" class="dialog-footer">
						<el-button @click="addModal = false">取 消</el-button>
						<el-button type="primary" @click="handleAddModal('addForm')">
							确 定
						</el-button>
					</span>
				</el-dialog>
				<!-- 修改分类弹窗 -->
				<el-dialog title="修改商品分类" :visible.sync="editModal" width="30%" :close-on-click-modal="false">
					<el-form :model="editData" label-width="80px">
						<el-form-item prop="name" label="分类名称" :rules="[{ required: true, message: '请输入分类名称', trigger: 'blur' },]">
							<el-input v-model="editData.name" maxlength="5" placeholder="必填,长度不能超过5位." show-word-limit onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;">
							</el-input>
						</el-form-item>
						<el-form-item prop="req" label="排序号">
							<el-input v-model="editData.seq" onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;"></el-input>
						</el-form-item>
					</el-form>
					<span slot="footer" class="dialog-footer">
						<el-button @click="editModal = false">取 消</el-button>
						<el-button type="primary" @click="handleEditModal">
							确 定
						</el-button>
					</span>
				</el-dialog>
				<div class="sub-list" v-show="openpanel && panelindex == index">
					<div class="sub-item" v-for="(item1, index1) in item.sub" :key="index1">
						<span>{{ item1.name }}</span>
						<div class="file-operation">
							<el-button type="text" icon="el-icon-edit" @click="editchildCategory(item1)">
								修改
							</el-button>
							<el-popconfirm title="确定删除当前分类？" @confirm="delCategory(item1)" style="margin-left: 10px;">
								<el-button slot="reference" type="text" icon="el-icon-delete">
									删除
								</el-button>
							</el-popconfirm>
						</div>
					</div>
				</div>
				<!-- 修改子类弹窗 -->
				<el-dialog title="修改商品分类" :visible.sync="editChildModal" width="30%" :close-on-click-modal="false">
					<el-form :model="editchildData" label-width="80px">
						<el-form-item prop="req" label="上级分类">
							<el-select v-model="editchildData.parent_id" placeholder="请选择" style="width: 100%;">
								<el-option v-for="item in categoryList" :key="item.id" :label="item.name"
									:value="item.id"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item prop="name" label="分类名称" :rules="[{ required: true, message: '请输入分类名称', trigger: 'blur' },]">
							<el-input v-model="editchildData.name" maxlength="5" placeholder="必填,长度不能超过5位."
								show-word-limit onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;"></el-input>
						</el-form-item>
						<el-form-item prop="req" label="排序号">
							<el-input v-model="editchildData.seq" onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;"></el-input>
						</el-form-item>
					</el-form>
					<span slot="footer" class="dialog-footer">
						<el-button @click="editChildModal = false">取 消</el-button>
						<el-button type="primary" @click="handleEditchildModal">
							确 定
						</el-button>
					</span>
				</el-dialog>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getCategoryQuery,
		getCategoryAdd,
		getCategoryEdit,
		getCategoryDel,
	} from '@/api/category'
	export default {
		data() {
			return {
				openpanel: true,
				panelindex: -1,
				categoryList: [],
				addModal: false,
				addData: {
					name: '',
					seq: '',
					parent_id: '',
				},
				editModal: false,
				editData: {
					name: '',
					req: '',
					parent_id: '',
					id: '',
					seq:''
				},
				editChildModal: false,
				editchildData: {
					name: '',
					req: '',
					parent_id: '',
					id: '',
					seq:''
				},
			}
		},
		created() {
			this.init()
		},
		methods: {
			//获取初始数据
			async init() {
				const res = await getCategoryQuery({
					ws_id: 1,
				})
				this.categoryList = res.data
			},
			openPanel(index) {
				if(index != this.panelindex){
					this.openpanel = false
				}
				this.panelindex = index
				// console.log(index,'点击下表')
				// console.log(this.openpanel,'false为展开')
				// console.log(this.panelindex,'存的变量')
				this.openpanel = !this.openpanel
			},
			//新增大类
			addMaincategory() {
				this.addModal = true
				this.addData.parent_id = ''
			},
			addChildren(item) {
				this.addData.name = ''
				this.addData.parent_id = item.id
				this.addModal = true
			},
			//新增子类
			handleAddModal(formName) {
				this.$refs[formName][0].validate(async (valid) => {
					if (valid) {
						this.addData.ws_id = 1
						const res = await getCategoryAdd(this.addData)
						if (res.status == '200') {
							this.$message.success(res.message)
							this.addModal = false
							this.addData.seq = ''
							this.init()
						}
					}
				})
			},
			editCategory(item) {
				this.editData.name = item.name
				this.editData.id = item.id
				this.editData.seq = item.seq
				this.editModal = true
			},
			// 修改名称
			async handleEditModal() {
				const res = await getCategoryEdit(this.editData)
				if (res.status == 200) {
					this.editModal = false
					await this.init()
				}
			},
			editchildCategory(item) {
				this.editchildData.name = item.name
				this.editchildData.id = item.id
				this.editchildData.parent_id = item.parent_id
				this.editchildData.seq = item.seq
				this.editChildModal = true
			},
			//修改子类
			async handleEditchildModal() {
				const res = await getCategoryEdit(this.editchildData)
				if (res.status == 200) {
					this.editChildModal = false
					await this.init()
				}
			},
			//删除分类
			async delCategory(item) {
				const res = await getCategoryDel({
					id: item.id,
				})
				if (res.status == '200') {
					this.$message.success('删除成功')
					this.init()
				} else {
					this.$message(res.message)
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 5px 15px;

		.folder-root {
			position: relative;
			border-top: 1px solid #eee;
			background: transparent;
			padding: 10px 0;

			.images {
				width: 16px;
				margin-right: 10px;
			}

			.sub-list {
				margin-top: 8px;

				.sub-item {
					position: relative;
					height: 45px;
					line-height: 45px;
					padding-left: 25px;
				}
			}

			.file-operation {
				position: absolute;
				top: 0;
				right: 0;
			}
		}
	}
</style>
